<template>
  <div id="app">
    <header>
      <img src="./assets/images/caidan.png" alt="">
      <img src="./assets/images/signup-logo.81c9f78.png" alt="">
      <span>我的卡券</span>
    </header>
    <router-view/>
    <footer>立即订餐</footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    //事件
    ppp(e) {
      for (var i = 0; i < this.pp.length; i++) {
        this.pp[i].style.color = "#9c9c9c";
      }
      if (e.target.tagName == "P") {
        e.target.style.color = "#0699ff";
      }
      if (e.target.parentNode.tagName == "P") {
        e.target.parentNode.style.color = "#0699ff";
      }
    },
  },
  mounted() {
    this.pp = document.querySelectorAll(".foot>p");
  }
}
</script>

<style lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 37.5 * 1rem;
}

.h(@height) {
  .px2rem(height,@height)
}

.w(@width) {
  .px2rem(width,@width)
}

.f(@font) {
  .px2rem(font-size,@font)
}

.lh(@line-height) {
  .px2rem(line-height,@line-height)
}
#app {
  color: #3f3f3f;
}

header {
  z-index: 999;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .h(53);
  .px2rem(padding,10);
  box-sizing: border-box;
  position: fixed;
  top: 0;
  width: 100%;
  img:first-child{
    .h(17);
    .w(22);
  }
  img:nth-child(2){
    .h(25);
    .w(150);
  }
  span{
    .f(13);
    color: #f0554b;
  }
}
footer{
  z-index: 999;
  .h(50);
  position: fixed;
  background: #e94f4f;
  bottom: 0;
  .lh(50);
  width: 100%;
  text-align: center;
  color: #fff;
  .f(15)
}
</style>
